<template>
  <div class="EditGraduateInfo">
    <el-form ref="form" label-width="50px" >
      <el-form-item label="文件">
          <div class="item uploadItem">
            <input type="text" class="uploadInput" v-model="graFileName" readonly placeholder="请上传文件">
            <el-upload
              class="upload-demo"
              :data="graSort"
              action="/api/graduateInfo/importGra"
              ref="graFileName"
              accept=".xls,.xlsx"
              :show-file-list="false"
              :on-change="addGraFile"
              :on-success="uploadGraFileSucc"
              :on-error="uploadGraFileError"
              :on-progress="uploadGraFileProgress"
              :auto-upload="false"
              >
              <i class="el-icon-upload uploadIcon"></i>
            </el-upload>
          </div>
      </el-form-item>
      <el-form-item class ="btn_group clearfix">
        <el-button type="primary" @click="downTemplate">下载模板</el-button>
        <el-button @click="onSubmit" v-loading.fullscreen.lock="fullscreenLoading">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { _downTemplate } from '../../network/graduate.js'

export default {
  name: 'EditGraduateInfo',
  props: ['graData','graSort'],
  data () {
    return {
        graFileName: '',
        fullscreenLoading: false
    }
  },
  mounted () {
  },
  methods: {
      /* 提交 */
      onSubmit () {
        this.$refs.graFileName.submit();
      },
      /* 上传文件成功 */
      uploadGraFileSucc () {
        // this.loading = false
        this.$message.success('上传成功')
        this.$parent.$parent.closeBatchAdd()
        this.$parent.$parent.onSearch()
      },
      /* 上传文件时 */
      uploadGraFileProgress () {
      },
      /* 上传文件失败 */
      uploadGraFileError (err, file, fileList) {
        // this.loading = false
        this.$message.error(err)
      },
      /* 文件域发生变化 */
      addGraFile (file, fileList) {
          // file为选择的文件   fileList为已选择的文件列表
        var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)
        if(testmsg === 'xls' || testmsg === 'xlsx') {
          this.graFileName = file.name
        }
        else{
          this.$message.error('上传文件只能是xls,xlsx格式!')
        }
      },
      /* 下载模板 */
      downTemplate () {
        window.location.href = '/api/graduateInfo/downloadTemplate'
      }

  }
}
</script>

<style>
.btn_group .el-form-item__content{
    float: right;
}
</style>
<style scoped>
.item{
  border: 1px solid #DCDFE6;
  border-radius: 4px;
}
.uploadItem{
  position: relative;
  width: 100%;
  overflow: hidden;
}
.uploadItem .uploadIcon{
  position: absolute;
  right: 8px;
  top: 10px;
  font-size: 20px;
}
.uploadItem .uploadInput{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  padding: 0 30px 0 10px;
  border: 0;
  outline: 0;
}
</style>

